<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Birds Flying</title>
  <style>
    canvas {
      position: relative;
      width: 500px;
      height: 500px;
      background: black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="800"></canvas>
  <script type="text/javascript" src="js/cocos2d-js-v3.13.js" charset="UTF-8"></script>
  <script type="text/javascript">
    function addBird() {
      const size = cc.director.getWinSize();
      const sprite = cc.Sprite.createWithSpriteFrame(cc.spriteFrameCache.getSpriteFrame('bird1.png'));
      sprite.setPosition(size.width / 2, size.height / 2);
      sprite.anchor = [0.5, 0.5];
      const allFrames = [];
      for(let i = 1; i <= 3; i++) {
        const str = `bird${i}.png`;
        const frame = cc.spriteFrameCache.getSpriteFrame(str);// new cc.SpriteFrame()

        allFrames.push(frame);
      }
      this.addChild(sprite, 0);

      const animation = new cc.Animation(allFrames, 0.1);
      const animate = new cc.Animate(animation);
      const action = animate.repeatForever();// new cc.RepeatForever(animate)
      sprite.runAction(action);
      randomMove(sprite);
      return sprite;
    }

    function randomMove(bird) {
      const ang = Math.random() * 2 * Math.PI;
      const {x: x0, y: y0} = bird;
      const {width, height} = cc.director.getWinSize();
      const x1 = width / 2 + 350 * Math.cos(ang);
      const y1 = height / 2 + 350 * Math.sin(ang);
      const distance = Math.sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2);

      const startTime = Date.now(),
        T = 5 * distance + 100;

      requestAnimationFrame(function f() {
        let p = (Date.now() - startTime) / T;
        p = Math.min(1.0, p);
        bird.x = x0 + p * (x1 - x0);
        bird.y = y0 + p * (y1 - y0);
        if(p < 1) {
          requestAnimationFrame(f);
        } else {
          setTimeout(() => {
            randomMove(bird);
          }, 500);
        }
      });
    }

    window.onload = function () {
      cc.game.onStart = function () {
        // load resources
        cc.LoaderScene.preload(['/res/birds.png', '/res/birds.json'], () => {
          const FgLayer = cc.Layer.extend({
            ctor() {
              this._super();
              return true;
            },
            onEnter() {
              this._super();
              cc.spriteFrameCache.addSpriteFrames('/res/birds.json', '/res/birds.png');

              addBird.call(this);

              gameCanvas.addEventListener('click', (evt) => {
                addBird.call(this);
              });
              let birdCount = 1;
              const timer = setInterval(() => {
                if(birdCount++ < 1000) addBird.call(this);
                else clearInterval(timer);
              }, 16);
            },
          });
          const BgLayer = cc.Layer.extend({
            ctor() {
              this._super();
              return true;
            },
            onEnter() {
              const drawNode = new cc.DrawNode();
              drawNode.clear();
              drawNode.drawDot(cc.p(400, 400), 400, cc.color(17, 51, 153, 128));
              this.addChild(drawNode, 0);
            },
          });
          const MyScene = cc.Scene.extend({
            onEnter() {
              this._super();
              const fglayer = new FgLayer();
              this.addChild(fglayer, 1);
              const bglayer = new BgLayer();
              this.addChild(bglayer);
            },
          });
          cc.director.runScene(new MyScene());
        }, this);
      };
      cc.game.run('gameCanvas');
    };
  </script>
</body>
</html>